<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员注册</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h2>欢迎注册会员</h2>
    <form id="registerForm">
      <div class="form-group">
        <label for="phone">手机号码：</label>
        <input type="tel" id="phone" name="phone" placeholder="11位手机号" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="password">创建密码：</label>
        <input type="password" id="password" name="password" placeholder="8位密码" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="email">注册邮箱：</label>
        <input type="email" id="email" name="email" placeholder="例如:wustzz@sina.com" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="verifyCode">验证码：</label>
        <input type="text" id="verifyCode" name="verifyCode" placeholder="请输入验证码" required>
        <span id="codeDisplay" class="code-display">----</span>
        <button type="button" id="refreshCode" class="refresh-btn">↻</button>
      </div>
      <div class="form-group">
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
      </div>
      <div class="form-group">
        <label for="birthday">生日：</label>
        <input type="text" id="birthday" name="birthday" placeholder="年/月/日">
      </div>
      <div class="form-group">
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age">
      </div>
      <div class="form-group">
        <label>籍贯：</label>
        <select id="province" name="province">
          <option value="hubei">湖北省</option>
          <option value="shanghai">上海市</option>
          <option value="guangdong">广东省</option>
        </select>
        <select id="city" name="city">
          <option value="wuhan">武汉</option>
          <option value="huangshi">黄石</option>
          <option value="yichang">宜昌</option>
        </select>
      </div>
      <div class="form-group">
        <label for="education">个人学历：</label>
        <select id="education" name="education">
          <option value="undergraduate">本科</option>
          <option value="graduate">研究生</option>
          <option value="doctor">博士</option>
          <option value="highSchool">高中</option>
        </select>
      </div>
      <div class="form-group">
        <label for="salary">月薪：</label>
        <input type="range" id="salary" name="salary" min="0" max="10000" value="5000">
        <span id="salaryValue">5000</span>
      </div>
      <div class="form-group">
        <label>个人爱好：</label>
        <input type="checkbox" id="hobby1" name="hobby" value="sing">
        <label for="hobby1">唱歌</label>
        <input type="checkbox" id="hobby2" name="hobby" value="run">
        <label for="hobby2">跑步</label>
        <input type="checkbox" id="hobby3" name="hobby" value="swim">
        <label for="hobby3">游泳</label>
      </div>
      <div class="form-group">
        <label for="photo">个人照片：</label>
        <input type="file" id="photo" name="photo" accept="image/*" onchange="previewPhoto(this)">
        <div id="photoPreview" class="photo-preview"></div>
      </div>
      <div class="form-group">
        <label for="intro">个人简介：</label>
        <textarea id="intro" name="intro" rows="8" cols="30"></textarea>
      </div>
      <div class="form-group submit-group">
        <button type="submit">提交</button>
        <button type="reset">重填</button>
      </div>
    </form>
  </div>
  <script src="script.js"></script>
</body>

</html>